import { DatePicker } from "antd"
import lessModule from "./index.module.less"
import { useEffect, useState } from "react"
import dayjs from "dayjs"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../common/utils"


// 主页-日期时间选择框组件
interface homePageDateTimePickerComponentComponentInterface {
    height?: number
    value?: dayjs.Dayjs
    change_picker?: Function
}
const HomePage_DateTimePickerComponent: React.FC<homePageDateTimePickerComponentComponentInterface> = (props) => {


    const [sourceValue, setSourceValue] = useState<dayjs.Dayjs>(props.value ?? dayjs())

    const change_datePicker = (date: dayjs.Dayjs, dateString: string | Array<string>) => {
        $eventBus.emit("rangeDate", { source: "HomePage_DateTimePickerComponent", explain: "已更改时间值，请同步至日期选择框！", data: { date } })
        props.change_picker?.(dateString)
        setSourceValue(date)
    }

    const init_height = () => {
        const dom = document.querySelectorAll('.ant-picker')[0] as any
        dom.style.height = `${props.height ?? 40}px`

    }
    // 广播函数数据
    const eventBusFuncData = {
        timeStamp: (data) => {
            setSourceValue(dayjs(data["data"]["timeAxisValue"]))
        }
    }

    useEffect(() => {
        init_height()
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        <div className={lessModule["homePageDateTimePickerComponent"]}>
            <DatePicker
                value={sourceValue}
                showTime
                onChange={change_datePicker}
                allowClear={false}
            />
        </div>
    )
}



export default HomePage_DateTimePickerComponent